<template>
	<div>
		<el-dialog v-model="dialogTableVisible" title="" width="30%">
			<div class="topTit">Favorite</div>
			<div class="inpBox"><input type="text" placeholder="Search" class="inp" name="" id="" /> <img src="/src/assets/user/16.png" class="scehImg hand" alt="" /></div>
			<div class="boxList">
				<div v-for="(item, index) in 30" :key="index" class="boxItem hand f f-a-c f-j-b">
					<div class="lef">Business</div>
					<div class="rig">7</div>
				</div>
			</div>
			<div class="botBtn f f-a-c f-j-b">
				<div class="lefBtn">Create a new list</div>
				<div class="rigBtn">Save</div>
			</div>
		</el-dialog>
	</div>
</template>

<script setup>
	import { ref } from "vue";
	import { Search } from "@element-plus/icons-vue";
	let dialogTableVisible = ref(false);
	let input1 = ref("");

	// 暴露给父组件
	defineExpose({
		dialogTableVisible
	});
</script>
<style scoped lang="scss">
	@function px($px) {
		@return calc($px / 1.5) * 1px;
	}

	::v-deep .el-dialog {
		border-radius: px(17) !important;
		padding: 50px 50px 20px 50px;
	}
	::v-deep .el-dialog__headerbtn .el-dialog__close {
		font-size: px(30);
	}
	.botBtn {
		margin-top: px(20);
		.lefBtn {
			width: px(218);
			height: px(53.3);
			line-height: px(53.3);
			background: #eeeeee;
			border-radius: px(5.3);
			font-size: px(18);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #02102e;
		}
		.rigBtn {
			width: px(108);
			height: px(53.3);
			line-height: px(53.3);
			background: #02102e;
			border-radius: px(5.3);
			font-size: px(18);
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: center;
			color: #ffffff;
		}
	}
	.boxList {
		width: 100%;
		max-height: px(400);
		margin-top: px(10);
		overflow: auto;
		.boxItem {
			height: px(60);
			padding: 0 px(15);
			border-radius: px(10);
		}
		.boxItem:hover {
			background-color: #f7f7f9;
		}
		.lef {
			font-size: px(21);
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #02102e;
		}
		.rig {
			font-size: px(21);
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #8590a1;
		}
	}
	.boxList::-webkit-scrollbar {
		width: px(7); /* 滚动条宽度 */
	}
	.boxList::-webkit-scrollbar-track {
		background: #f7f7f9; /* 滚动条轨道背景色 */
	}
	.boxList::-webkit-scrollbar-thumb {
		background: #c1c5cb; /* 滚动条滑块颜色 */
		border-radius: px(10);
	}
	.boxList::-webkit-scrollbar-thumb:hover {
		background: #c1c5cb; /* 鼠标悬停时滚动条滑块颜色 */
	}
	.inpBox {
		position: relative;
		width: 100%;
		height: px(50);
		border: px(2.5) solid #000;
		margin-top: px(20);
		border-radius: px(10);
		overflow: hidden;
		.scehImg {
			position: absolute;
			width: px(24);
			height: px(24);
			right: px(15);
			top: 50%;
			transform: translateY(-50%);
		}
		.inp {
			padding: 0;
			border: 0;
			height: 100%;
			width: 100%;
			padding: 0 px(50) 0 px(20);
			font-size: px(18);
		}
	}
	input:focus {
		outline: none;
	}
	.topTit {
		font-size: px(26.6);
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: LEFT;
		color: #000000;
	}
</style>
